<!--
 *@开发者: 刘翔
 *@创建时间: 2024-12-3 16:18:57
 *@描述:超支排名第4科室-费用构成
!-->
<template>
  <div class="pageTile15_14">
    <div class="pageTile15_14-left">
      <div class="pageTile15_14-left-echarts" ref="pageTitle15_14TopEchartsRefs"></div>
    </div>
    <formList style="width: 40%" :formParameter="formParameter" :data_list="data_list" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList';
export default {
  // 组件名称
  name: 'pageTile15_14',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      dataKey: '',
      keyName: '全院费用构成',
      data_list: [],
      data_list1: [],
      data_list2: [],
      formParameter: [
        { width: '15%', title: '类型' },
        { width: '25%', title: this.keyName },
        { width: '60%', title: '' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data, keyName) {
      //图表
      this.echartsInit(data.data_list, keyName);
    },
    //图表
    echartsInit(data_list, keyName) {
      this.keyName = keyName;
      this.dataKey = Object.keys(data_list).filter(item => item !== this.keyName)[0];
      this.formParameter[1].title = this.keyName;
      this.formParameter[2].title = this.dataKey;
      this.data_list1 = data_list[this.dataKey][0];
      this.data_list2 = data_list[this.keyName][0];
      let list = [];
      for (let item in this.data_list1) {
        list.push(item);
      }
      list.forEach(item => {
        this.data_list.push({
          类型: item,
          [this.dataKey]: this.data_list1[item],
          [this.keyName]: this.data_list2[item],
        });
      });
      var myChart = echarts.init(this.$refs.pageTitle15_14TopEchartsRefs);
      var option;
      option = {
        title: {},
        legend: {
          data: [this.dataKey, this.keyName],
        },

        radar: {
          radius: '80%',
          // axisLabel: {
          // 	show: true,
          // },
          splitArea: {
            show: false,
          },
          // shape: "circle",
          axisName: {
            fontSize: '18px',
            color: '#8e8e8e',
          },
          indicator: (function () {
            var res = [];
            for (var i = 0; i < list.length; i++) {
              res.push({ text: list[i] });
            }
            return res;
          })(),
        },
        series: [
          {
            type: 'radar',
            radarIndex: 0,
            label: {
              show: true,
            },
            data: [
              {
                name: this.dataKey,
                value: [],
                itemStyle: {
                  color: '#71b8ee', // 设置全院费用构成的颜色为蓝色
                },
                areaStyle: {
                  color: '#71b8ee33', //区块色颜色
                },
                lineStyle: {
                  width: 3, // 控制雷达图区块边线的粗细
                  color: '#86c9f8',
                },
                label: {
                  show: true,
                  color: '#86c9f8',
                  fontSize: 18,
                },
              },
              {
                name: this.keyName,
                value: [],
                itemStyle: {
                  color: '#85db9c', // 设置全院费用构成的颜色为蓝色
                },
                areaStyle: {
                  color: '#85db9c2e', //区块色颜色
                },
                lineStyle: {
                  width: 3, // 控制雷达图区块边线的粗细
                  color: '#85db9c',
                },
                label: {
                  show: true,
                  color: '#85db9c',
                  fontSize: 18,
                },
              },
            ],
          },
        ],
      };
      for (let item in this.data_list1) {
        option.series[0].data[0].value.push(this.data_list1[item]);
      }
      for (let item in this.data_list2) {
        option.series[0].data[1].value.push(this.data_list2[item]);
      }
      option && myChart.setOption(option);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.pageTile15_14 {
  display: flex;
  height: 100%;
  .pageTile15_14-left {
    width: 60%;
    height: 100%;
    .pageTile15_14-left-echarts {
      height: 90%;
    }
    .pageTile15_14-left-card {
      margin: 0 20px;
      padding: 2%;
      display: flex;
      align-items: center;
      font-size: 1.7rem;
      height: 10%;
      line-height: 80px;
      background: #fff2ca;
      border-radius: 16px;
      border: 1px solid #000;
    }
  }

  .color-tips {
    color: #ff1310;
  }
}
</style>
